<template>
	<div class="login" >
		<router-link to='movieClips'>
		    <img class="goback" src="../../../assets/images/movieClips/4/f-1.png" alt="" />
		</router-link>
		<!--<img class="goback" src="../../../assets/images/movieClips/4/f-1.png" alt="" />-->
	    <img class='loginLogo' src="../../../assets/images/movieClips/4/login_logo.png" alt="" />
	     <p class="title">登录</p>
	     <div class="username">
	     	<div class="logoBox">
	     		<img src="../../../assets/images/movieClips/4/login_phone_icon.png" alt="" />
	     	</div>
	     	<input v-model="username" class="usernameText" placeholder="请输入注册手机号" style='outline:none'/>
	     	<div class="line">
	     	</div>
	     </div>
	     <div class="password">
	     	<div class="logoBox">
	     	    <img src="../../../assets/images/movieClips/4/login_pwd_icon.png" alt="" />
	        </div>
	     	<input v-model="password" class="passwordText" placeholder="请输入密码" style='outline:none'/>
	        <div class="line">
	     	</div>
	     </div>
	     <!--<router-link :to='{name:"movieClips"}'>-->
	     	<div class="loginBtn" @click="loginSumit">登录</div>
	     <!--</router-link>-->
	     
	     <router-link class="wjmm" to='forgetPassword'>忘记密码?</router-link>
	     <p class="tishi">
	     	<span>没有账号吗?</span>
	     	 <router-link href="javascript:;" :to='{name:"register"}'>我要注册</router-link>
	     </p>
	     <div class="dialog">
	     	<el-dialog
				title="提示"
				:visible.sync="dialogVisible"
				width="30%"
			>
				<span>{{dialogInfo}}</span>
				<span slot="footer" class="dialog-footer">
					<el-button @click="dialogVisible = false">取 消</el-button>
					<el-button type="primary" @click="dialogVisible = false">确 定</el-button>
				</span>
			</el-dialog>
	     </div>
	</div>
</template>

<script>
export default{
	name:"login",
	data(){
		return{
			username:"",
            password:"",
            dialogInfo:'',
            dialogVisible:false
		}
	},
	created(){
		var id = localStorage.getItem("id");
		var username = localStorage.getItem("username");
		var password = localStorage.getItem("password");
//		console.log(id,username,password)
//		console.log(localStorage)
	},
	methods:{
		loginSumit(event){
	    	var userInfo={
	    		username:this.username,
	    		password:this.password
	    	}
	    	this.$axios.post('http://localhost:3000/selectuser',userInfo)
	    	.then(res=>{
//	    		console.log(res.data)
	    		if(userInfo.username!=''&& userInfo.password!=''){
	    			if(res.data.msg=="暂无注册"){
		    			this.dialogInfo='该用户还未注册，快去注册吧';
		    		}else{
		    			if(res.data[0].username==this.username&&res.data[0].password==this.password){
			    			this.currentUser=res.data[0].username;
	                        this.dialogInfo='登录成功';
	                        //本地存储
							localStorage.setItem('username',res.data[0].username);
							localStorage.setItem("id",res.data[0].id);
							localStorage.setItem("password",res.data[0].password);
							//本地缓存mine的数据
							this.$axios.get("http://localhost:3000/mineIndexData")
							.then(res => {
							    localStorage.setItem("mineData",JSON.stringify(res.data.data)) 
							})
							.catch(error => {
								console.log(error)
							})
		    		  }else{
		    		  	this.dialogInfo="用户名或密码错误，请重新登录!";
		    		  }
		    		}
	    		}else{
	    			this.dialogInfo='用户名或密码不能为空';
	    		}
	    	})
	    	.catch(error=>{
	    		console.log(error);
	    	})
	    	this.dialogVisible=true;
    	}
	},
	props:{
		"logining":Boolean
	}
}
</script>

<style scoped lang="less">
@current:100rem;
.login{
	width: 100%;
	height: 1135/@current;
	position: relative;
	background-image: url('../../../assets/images/movieClips/4/login_bg.png');
	.goback{
		position: absolute;
		left: 40/@current;
		top: 70/@current;
		width: 25/@current;
		height: 40/@current;
		/*margin-left: 40/@current;*/
	}
	.loginLogo{
		margin-left: 200/@current;
		margin-top: 180/@current;
		width: 240/@current;
		height: 120/@current;
	}
	.title{
		margin: 50/@current 287/@current 0 ;
		display: block;
		width: 65/@current;
		height: 50/@current;
		font-size: 30/@current;
		color: #c0adcd;
		font-weight: 700;
		border-bottom: 4/@current solid #A54BE8;
		text-align: center;
	}
	.usernameText,.passwordText{
		font-size: 30/@current;
		color: #ebd5fb!important;
		text-align: center;
		display: block;
		position: relative;
		top:-130/@current;
		left: -50/@current;
		background-color: transparent;
		border: none;
	}
	.username,.password{
		box-sizing: border-box;
		padding: 0 100/@current;
		overflow: hidden;
		.logoBox{
			float:left;
			img{
				width: 30/@current;
				height: 40/@current;
			}
		}
		.line{  
			width: 100%;
			height: 3/@current;
			background: url('../../../assets/images/movieClips/4/login_long_line.png')no-repeat;
		}
	}
	.username{
		.usernameText{
			float: left;
			margin-top: 65/@current;
			margin-left: 100/@current;
		}
		.line{
			margin-top: 130/@current;
		}
	}
	.password{
		margin-top: -80/@current;
		height:150/@current ;
		.passwordText{
			float: left;
			margin-top: 65/@current;
			margin-left: 100/@current;
		}
		.line{
			margin-top: 130/@current;
		}
	}
	.loginBtn{
		background: url('../../../assets/images/movieClips/4/login_btn_normal.png');
		width: 440/@current;
		height: 75/@current;
		margin-left: 100/@current;
		margin-top: 80/@current;
		font-size: 30/@current;
		color: #ebd5fb;
		text-align: center;
		line-height:75/@current ;
	}
	.wjmm{
		display: block;
		margin-top: 60/@current;
		font-size: 24/@current;
		color: #cebed5;
		text-align: center;
	}
	.tishi{
		text-align: center;
		margin-top: 0/@current;
		span{
			font-size: 24/@current;
		    color: #937f9c;
		}
		a{
			font-size: 24/@current;
		    color: #cebed5;
		}
	}

}
</style>
<style lang="less">
.el-dialog__wrapper{
	.el-dialog--small{
		width: 230px;
		height: 185px;
		top: 33%;
		.el-dialog__header{
			padding: 0;
			text-align: center;
			.el-dialog__headerbtn{
				.el-dialog__close el-icon el-icon-close{
					display: none;
				}
			}
		}
		.el-dialog__body{
			padding: 10px 10px;
			text-align: center;
		}
		.el-dialog__footer{
			padding: 0px 10px;display: flex;
			.dialog-footer{
				margin-left: 15px;
			}
		}
	}
}	
</style>